// ============================================
// THEME STYLES - Light & Dark Mode
// ============================================

body.light-mode .table {
  background-color: #ffffff;
  color: #000000;

  table {
    background-color: #ffffff !important;
    color: #000000 !important;
  }

  thead > tr th,
  table thead > tr th {
    background-color: #ffffff !important;
  }

  tbody tr,
  table tbody tr {
    background-color: #ffffff !important;
  }

  table tbody tr:nth-child(odd) {
    background-color: #f1f2f4 !important;
  }

  table tbody tr:nth-child(even) {
    background-color: #ffffff !important;
  }

  tbody tr:hover,
  table tbody tr:hover {
    background-color: #dcdfe4 !important;
    color: #000000 !important;
  }
}

body.dark-mode .table {
  background-color: #161a1d !important;
  color: #ffffff !important;

  table {
    background-color: #161a1d !important;
    color: #ffffff !important;
  }

  thead > tr th,
  table thead > tr th {
    background-color: #161a1d !important;
    color: #ffffff !important;
  }

  tbody tr,
  table tbody tr {
    background-color: #161a1d !important;
  }

  tr:nth-child(odd),
  table tbody tr:nth-child(odd) {
    background-color: #22272b !important;
  }

  tr:nth-child(even),
  table tbody tr:nth-child(even) {
    background-color: #161a1d !important;
  }

  tbody tr:hover,
  table tbody tr:hover {
    background-color: #101214 !important;
    color: #ffffff !important;
  }
}

// Override Bootstrap table defaults in dark mode
body.dark-mode table.custom-table {
  --bs-table-bg: #161a1d !important;
  --bs-table-striped-bg: #22272b !important;
  --bs-table-hover-bg: #101214 !important;
  --bs-table-color: #ffffff !important;
  background-color: #161a1d !important;
  color: #ffffff !important;

  thead tr th {
    background-color: #161a1d !important;
    color: #ffffff !important;
    border-color: #22272b !important;
  }

  tbody tr {
    background-color: #161a1d !important;
    color: #ffffff !important;
    
    &:nth-of-type(odd) {
      --bs-table-accent-bg: #22272b !important;
      background-color: #22272b !important;
    }

    &:nth-of-type(even) {
      background-color: #161a1d !important;
    }

    &:hover {
      --bs-table-accent-bg: #101214 !important;
      background-color: #101214 !important;
    }

    td {
      background-color: inherit !important;
      color: #ffffff !important;
      border-color: #22272b !important;
    }
  }
}

body.dark-mode .modal-content {
  background-color: #1d2125;
  color: #ffffff;

  .close {
    color: #ffffff;
  }
}

// ============================================
// TABLE STRUCTURE
// ============================================

.table {
  .row {
    justify-content: center;
  }

  .nav-link {
    padding: 0;
  }

  .lastSolvedOn {
    text-wrap: nowrap;
  }

  // Sticky table header
  thead {
    > tr:first-child {
      display: none;
    }

    > tr th {
      position: sticky;
      top: 60px;
      text-wrap: nowrap;
      z-index: 10;
    }
  }
}

// ============================================
// DIFFICULTY INDICATORS
// ============================================

.table {
  // Difficulty badge & progress bar colors
  .easy,
  .progress-bar.easy,
  .progress .easy {
    background-color: #5cb85c !important;
    color: #ffffff !important;
  }

  .medium,
  .progress-bar.medium,
  .progress .medium {
    background-color: #f0ad4e !important;
    color: #ffffff !important;
  }

  .hard,
  .progress-bar.hard,
  .progress .hard {
    background-color: #d9534f !important;
    color: #ffffff !important;
  }

  // Difficulty progress section
  #difficultyProgress {
    margin-bottom: 25px;
    font-size: 11.5px;

    > div:nth-child(n + 2) {
      margin-top: 12px;
    }
  }

  .progress-pie {
    height: 75px;
  }

  .progress-bar-sm {
    height: 5px;
  }

  .reset-button {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 0.7rem;
  }
}

// ============================================
// BADGES & PATTERNS
// ============================================

.table {
  .badge {
    display: inline-block;
    width: auto;
    white-space: nowrap;
  }

  .badge-secondary,
  .patterns .badge,
  .patterns .badge-secondary {
    background-color: #6c757d !important;
    color: #ffffff !important;
  }

  .companies,
  .patterns {
    justify-content: space-evenly;
    margin: 0;
    flex-wrap: wrap;
  }

  .patterns {
    gap: 0.5rem;

    .badge {
      display: inline-block;
      width: auto;
      white-space: nowrap;
    }
  }

  #pattern-toggle {
    transform: scale(0.7);
    margin: 0;
  }
}

// ============================================
// COMPANY ICONS
// ============================================

.table .companies img {
  padding: 5px;
  max-width: 30px;
  max-height: 30px;
  height: auto;
  width: auto;
  object-fit: contain;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  color: #6c757d;
  min-width: fit-content;
}

// Dark mode alt text color for company images
body.dark-mode .table .companies img {
  color: #ffffff;
}

// ============================================
// TOOLTIPS
// ============================================

.react-tooltip {
  z-index: 1000 !important;
}
